<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Container and Layouts</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("base-widget-desktop");</script>
		<script type="text/javascript">
			function createSubControl(label, layoutConstraint) {
				return {
					$type: "HtmlContainer",
					content: (label || "&nbsp;"),
					layoutConstraint: layoutConstraint,
					style: { display: "block", background: "#FDFEDA", padding: 4, border: "1px #DBB74A solid" }
				};
			}
			
			dorado.onInit(function() {
				new dorado.widget.Panel({
					renderTo: document.body,
					caption: "AnchorLayout",
					collapseable: true,
					width: 700,
					height: 300,
					style: "margin-bottom: 8px",
					layout: "Anchor",
					children: [
						createSubControl("1) left:4; top:4", { left: 4, top: 4 }),
						createSubControl("2) anchorLeft:previous; left:4; top:10", { anchorLeft: "previous", left: 4, top: 4 }),
						createSubControl("3) anchorLeft:previous; left:4; top:10", { anchorLeft: "previous", left: 4, top: 4 }),
						createSubControl("4) left:50%; anchorTop:previous; top:4; width:70%", { left: "50%", anchorTop: "previous", top: 4, width: "70%" }),
						createSubControl("5) left:50%; top:50%; width:200; height: 50", { left: "50%", top: "50%", width: 300, height: 50 }),
						createSubControl("6) right:4; bottom:4", { right: 4, bottom: 4 }),
						createSubControl("7) anchorRight:previous; right:4; bottom:4", { anchorRight: "previous", right: 4, bottom: 4 }),
						createSubControl("8) anchorRight:previous; right:4; bottom:4", { anchorRight: "previous", right: 4, bottom: 4 }),
						createSubControl("9) right:4; anchorBottom:previous; bottom:4", { right: 4, anchorBottom: "previous", bottom: 4 }), 
						createSubControl("10) right:4; anchorBottom:previous; bottom:4", { right: 4, anchorBottom: "previous", bottom: 4 })
					]
				});
				
				new dorado.widget.Panel({
					renderTo: document.body,
					caption: "DockLayout",
					collapseable: true,
					width: 700,
					height: 300,
					style: "margin-bottom: 8px",
					layout: "Dock",
					children: [
						createSubControl("1) left", "left"),
						createSubControl("2) top", "top"),
						createSubControl("3) right", "right"),
						createSubControl("4) bottom", "bottom"),
						createSubControl("5) type:bottom; height:60", { type: "bottom", height: 60 }),
						createSubControl("6) type:right; width:120", { type: "right", width: 120 }),
						createSubControl("(center)")]
				});
				
				new dorado.widget.Panel({
					renderTo: document.body,
					caption: "FormLayout",
					collapseable: true,
					width: 700,
					height: 300,
					style: "padding-bottom: 8px",
					layout: { $type: "Form", cols: "80,*,80,*" },
					children: [
						createSubControl(),
						createSubControl(),
						createSubControl(),
						createSubControl(),
						createSubControl(),
						createSubControl("colSpan:3", { colSpan: 3 }),
						createSubControl("rowSpan:3", { rowSpan: 3 }),
						createSubControl(),
						createSubControl("colSpan:2; rowSpan:2", { colSpan: 2, rowSpan: 2 }),
						createSubControl(),
						createSubControl(),
						createSubControl(),
						createSubControl(),
						createSubControl("colSpan:4", { colSpan: 4 }),
						createSubControl()
					]
				});
			});
		</script>
	</head>
	<body style="height: 100%"></body>
</html>
